import React, { useState, useEffect } from "react";
import { Typography } from "antd";

const CardItem = (props) => {
  const { item, onCheckedChange } = props
  const { checked, name, price } = item;
  // const onWrapCheckedChange = (e) => {
  //   onCheckedChange(item)
  // }
  return (
    <div>
      <div className="item-card">
        <div className="checkbox-wrap">
          <input 
            type="checkbox" 
            checked={checked}
            onChange = {onCheckedChange.bind(null, item)}
        />
        </div>
      </div>
      <p>
        {name} <Typography.Text mark>${price}</Typography.Text>
      </p>
    </div>
  );
};

export default CardItem;
